<template>
  <div class="page">
    <!-- header -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="费用明细"
    ></van-nav-bar>
    <div class="app-page">
      <div class="uo-balance">
        <div class="uo-balances">
          当前金额：￥ <span>{{ individualAccount.je }}元</span>
        </div>
        <div class="my-top-up">
          <div @click="href('/TopUp', '1')" class="top-up">充值</div>
          <div @click="href('/TopUp', '2')" class="my-embody">提现</div>
        </div>
      </div>
      <van-tabs v-model="Vactive" color="#08a6ed">
        <van-tab title="全部订单">
          <div class="order-wrap">
            <div class="order-card" v-for="(item, i) in orders" :key="i">
              <div class="weui-cell-header justify">
                <div class="cell-tt">订单号：{{ item.ordercode }}</div>

                <div class="cell-status ing" v-if="item.ddstatus == '1'">
                  未完成
                </div>
                <div class="cell-status over" v-else-if="item.ddstatus == '3'">
                  已评价
                </div>
                <div class="cell-status ing" v-else-if="item.ddstatus == '4'">
                  旷课未完成
                </div>
                <div class="cell-status over" v-else-if="item.ddstatus == '5'">
                  旷课已完成
                </div>
                <div class="cell-status over" v-else>已完成</div>
              </div>
              <div class="weui-cells">
                <div class="van-cell">
                  <!-- <div class="card-pic">
                    <img :src="item.img" />
                  </div>-->
                  <div class="weui-cell__bd">
                    <div class="ht-justify">
                      <div>
                        <div class="list-tt">类型：{{ item.orderstatus }}</div>
                      </div>
                      <div class="justify-div">
                        <!-- 课时数量 -->
                        <div
                          class=" justify"
                          v-if="item.orderstatus == '学时扣减'"
                        >
                          <p>课时数量：</p>
                          <div>{{ item.quantity }}</div>
                        </div>
                        <!-- 单价 -->
                        <div
                          class="justify "
                          v-if="item.orderstatus == '学时扣减'"
                        >
                          <p>单价：</p>
                          <div>{{ item.price }}</div>
                        </div>
                        <!-- 金额 -->
                        <div class="justify">
                          <p>金额：</p>
                          <div>
                            <span
                              v-if="
                                item.orderstatus == '学费' ||
                                  item.orderstatus == '充值'
                              "
                              >+</span
                            >
                            <span v-else-if="item.jxsh == '8'">+</span>
                            <span v-else>-</span>{{ item.money }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="weui-cell-foot">
                  <van-button
                    type="info"
                    v-if="item.orderstatus === '学费' && item.ddstatus == '1'"
                    @click="cancel(item.id)"
                    round
                    >取消订单</van-button
                  >
                  <van-button
                    type="info"
                    v-if="item.orderstatus === '学费' && item.ddstatus == '1'"
                    @click="PayFees"
                    round
                    >缴费</van-button
                  >
                  <van-button
                    type="info"
                    v-if="item.orderstatus == '学费' && item.ddstatus === '1'"
                    @click="href('/OrmulaBar', item.id)"
                    round
                    >编辑订单</van-button
                  >
                  <van-button
                    v-if="item.orderstatus === '学费' && item.ddstatus === '2'"
                    type="info"
                    @click="href('/CheckOrder', item.id)"
                    round
                    >查看订单</van-button
                  >
                  <van-button
                    v-if="
                      item.orderstatus !== '学费' &&
                        item.orderstatus !== '科目一费用' &&
                        item.orderstatus !== '基础费用' &&
                        item.orderstatus !== '充值' &&
                        item.orderstatus !== '提现'
                    "
                    type="info"
                    @click="href('/OrdersDetails', item.id)"
                    round
                    >查看订单</van-button
                  >
                  <van-button
                    v-if="
                      item.ddstatus == 2 &&
                        item.orderstatus != '学费' &&
                        item.orderstatus != '科目一费用' &&
                        item.orderstatus != '基础费用' &&
                        item.orderstatus != '提现' &&
                        item.orderstatus != '充值'
                    "
                    type="info"
                    @click="href('/Evaluate', item.id)"
                    round
                    >评价</van-button
                  >
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已完成">
          <Completed></Completed>
        </van-tab>
        <!-- jsstatus -->
        <van-tab title="未完成">
          <Arrearage></Arrearage>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
// 引入接口文档
import { Toast, Dialog } from "vant";

import {
  userIndent,
  // payment,
  CancellationOrder,
  individualAccount,
  DoubleCounting
} from "../../assets/js/api/user";
import { baseURL } from "../../assets/js/config";
import Completed from "./UcOrders/Completed";
import Arrearage from "./UcOrders/Arrearage";
export default {
  data() {
    return {
      Vactive: "0",
      text: "",
      orders: [], // 全部订单
      individualAccount: {}, //账户当前余额
      completed: [],
      status: "" // 验证是否报名，是否面签等
    };
  },

  mounted() {
    this.baseURL = baseURL;
    DoubleCounting().then(res => {
      this.status = res.code;
      // console.log(res);
      /**
       * 501  未报名
       * 502  未交费
       * 503 未审核
       */
    });

    individualAccount().then(res => {
      // console.log(res);
      this.individualAccount = res.data;
    });

    let lid = 3;
    userIndent(lid).then(res => {
      // console.log(res);
      this.orders = res.data;
      // console.log(this.orders);
    });
  },

  methods: {
    // 缴费
    PayFees() {
      this.$router.push({ path: "/OnlinePayment" });
      // // console.log("缴费");
      // payment().then(res => {
      //   if (res.code == 0) {
      //     Toast.success("缴费成功");
      //     this.$router.go(0);
      //   }
      // });
    },

    cancel(id) {
      Dialog.confirm({
        title: "标题",
        message: "弹窗内容"
      })
        .then(() => {
          // on confirm
          CancellationOrder().then(res => {
            if (res.code == 0) {
              Toast.success("订单取消成功");
              for (let i = 0; i < this.orders.length; i++) {
                if (this.orders[i].id == id) {
                  this.orders.splice(i, 1);
                }
              }
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    href(url, id) {
      if (url == "/TopUp") {
        if (this.status == 501) {
          Toast("请先报名");
        } else if (this.status == 502) {
          Toast("您尚未缴费，请缴费通过并面签");
        } else if (this.status == 503) {
          Toast("您尚未面签通过，请先到社保局面签");
        } else {
          this.$router.push(`${url}/${id}`);
        }
      } else {
        this.$router.push(`${url}/${id}`);
      }
    }
  },
  components: { Completed, Arrearage },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>
<style scoped></style>
